<template>
  <vue3-seamless-scroll
    class="seamless-warp"
    :list="tableData"
    hover
    :step="step"
    :ease="ease"
  >
    <el-table
      :data="tableData"
      :height="height"
      :max-height="maxHeight"
      :show-header="showHeader"
      :key="updateKey"
    >
      <el-table-column
        v-for="item in tableColumns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-if="item.slot" #default="{ row, column, $index }">
          <slot
            :name="item.slot"
            :row="row"
            :column="column"
            :$index="$index"
          />
        </template>
      </el-table-column>
    </el-table>
  </vue3-seamless-scroll>
</template>
<script setup lang="ts">
import { onUpdated, reactive, ref } from "vue";
defineOptions({
  name: "aigcScrollTable",
});
type ITableColumns = {
  slot?: string;
  prop: string;
  label: string;
};
withDefaults(
  defineProps<{
    tableData: Array<any>;
    tableColumns: Array<ITableColumns>;
    showHeader?: boolean;
    ease?: any;
    maxHeight?: number | string;
    height?: number | string;
    step?: number | string;
  }>(),
  {
    showHeader: false,
    height:300,
    step:1,
    ease: {
      x1: 0,
      y1: 0,
      x2: 1,
      y2: 1,
    },
  }
);
const updateKey = ref(0);

onUpdated(() => {
  updateKey.value = updateKey.value++;
  console.log(updateKey.value);
});
</script>
<style lang="scss" scoped>
.seamless-warp {
  height: 300px;
  width: 100%;
  overflow: hidden;
}

::v-deep(.table-style) {
  .el-table__header-wrapper {
    display: none;
  }
}


</style>
